<script setup>
import { ref, onMounted } from "vue";

onMounted(() => {
  const resize = () => {
    const devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
    const deviceheight = document.documentElement.clientHeight; //获取当前分辨率下的可是区域高度
    const scaleX = devicewidth / 1920;
    const scaleY = deviceheight / 1080;
    const scale = Math.min(...[scaleX, scaleY]);
    // scaleV.value = scale;
    console.log(scale, "scale");
    //document.getElementById('appcontainer').style.zoom = scale;//放大缩小相应倍数
    document.getElementById("appcontainer").style.transform =
      "scale(" + scale + ")"; //放大缩小相应倍数
  };

  resize();

  window.onresize = () => {
    resize();
  };
});
</script>

<template>
  <div id="appcontainer">
    <!-- <router-view></router-view> -->
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component
          :is="Component"
          :key="$route.path"
          v-if="$route.meta.keepAlive"
        />
      </keep-alive>
      <component
        :is="Component"
        :key="$route.path"
        v-if="!$route.meta.keepAlive"
      />
    </router-view>
  </div>
</template>

<style scoped>
#appcontainer {
  position: relative;
  width: 1920px;
  height: 1080px;
  background: url(./views/demo/assets/shouye01.jpg) no-repeat top center / 100%;
}
</style>
